<!--头部公共部分-->
{include file="common/header" /}
<div style="padding: 10px;margin-left: 240px;">
    <div class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" value="{$user.name}" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-inline">
                <input type="hidden" name="img" value="{$user['img']}">
                <button type="button" class="layui-btn layui-btn-normal" id="view_btn">上传头像</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="img" width="105" height="105" src="{$user['img']}">
                    <p id="view_Text"></p>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="hidden" name="id" value="{$user.id}">
                <input class="layui-btn" lay-submit lay-filter="category" style="width: 105px;" value="立即提交" readonly>
            </div>
        </div>
    </div>

</div>
<!--底部公共部分-->
{include file="common/footer" /}
<script>
    //JavaScript代码区域
    layui.use(['form', 'tree', 'upload'], function() {
        let form = layui.form,
            upload = layui.upload,
            $ = layui.$;

        //缩略图上传
        let isLoad;
        upload.render({
            elem: '#view_btn',
            url: '{:url("user/lists")}?p=2',
            before: function(obj) {
                isLoad = layer.load(0, {
                    shade: false
                }); //0代表加载的风格，支持0-2
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#img').attr('src', result); //图片链接（base64）
                });
            },
            done: function(res) {
                //如果上传失败
                if(res.code === 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                layer.close(isLoad);
                setTimeout(function () {
                    layer.msg('上传成功');
                }, 1000);
                console.log(res.data);
                $('input[name=img]').val(res.data);
            }
        });

        //监听提交
        form.on('submit(category)', function(data) {
            let field = data.field;
            if(field.img == ""){layer.msg('请上传商品图片');return false;}
            $.ajax({
                url: '{:Url("user/upload_img")}',
                type: "post",
                data: field,
                beforeSend: function() {
                    isLoad = layer.load(0, {
                        shade: false
                    }); //0代表加载的风格，支持0-2
                },
                success: function(result) {
                    layer.msg(result.msg);
                    if(result.code === 0) {
                        setTimeout(function () {
                            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            parent.location.reload();
                        }, 2000);
                    }
                },
                complete: function() {
                    layer.close(isLoad)
                },
                error: function(error) {
                    console.log(error)
                }
            });
            return false;
        });
    });
</script>
</body>

</html>